<template>
  <section class="yy-nurse-client">
    <header ref="headerRef" class="yy-nurse-client_header">
      <img :src="userAvator" class="yy-nurse-client_header-avatar" />
      <div v-if="false" class="yy-nurse-client_header-nav">
        <ul>
          <li class="yy-nurse-client_header-nav-active"><a>患者签到</a></li>
          <li v-if="false"><a>诊室概况</a></li>
          <li v-if="false"><a>诊间小屏</a></li>
        </ul>
      </div>
      <div class="yy-nurse-client_header-btn">
      </div>
    </header>
    <div class="yy-nurse-client_notify">

    </div>
    <div class="yy-nurse-client_router">
      <router-view></router-view>
    </div>
  </section>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {computed, onBeforeUnmount, onMounted, ref} from "vue";
import useUserStore from "@/store/modules/user.js";
import defaultAvatar from '@/assets/images/avatar.jpeg'

const userStore = useUserStore()
const router = useRouter()
const headerRef = ref()

const userAvator = computed(() => {
  if (userStore.avatar) {
    return userStore.avatar
  }
  return defaultAvatar
})

onMounted(() => {
  headerRef.value.addEventListener('mousedown', onMouseDown)
  headerRef.value.addEventListener('mouseup', onMouseUp)
  top.postMessage({
    data: {
      width: 'auto',
      height: '50px'
    },
    action: 'SET_HEADER_SIZE'
  }, '*')
})

onBeforeUnmount(() => {
  headerRef.value.removeEventListener('mousedown', onMouseDown, false)
  headerRef.value.removeEventListener('mouseup', onMouseUp, false)
})

const onMouseDown = (event) => {
  const element = event.target
  if (element?.tagName.toLowerCase() === 'button' || element?.getAttribute("class")?.includes('yy-doctor-client_item-action-item')) {
    return
  }
  top.postMessage({data:
        {
          button: event.button,
          clientX: event.clientX,
          clientY: event.clientY
        }, action:'SAMPLE_EVENT_MOUSEDOWN'}, '*')
}
const onMouseUp = (event) => {
  top.postMessage({data: {
      button: event.button,
      clientX: event.clientX,
      clientY: event.clientY
    }, action:'SAMPLE_EVENT_MOUSEUP'}, '*')
}
</script>

<style scoped lang="scss">
.yy-nurse {
  &-client {
    width: 100%;
    height: 100%;
    position: relative;
    background: #dcdfe6;
    &_header {
      height: 50px;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: #3375b9; //#37837b;
      padding: 0 20px;
      background: linear-gradient(to right,#25799e, #0076b8, #24b5ff);
      &-avatar {
        width: 40px;
        border-radius: 8px;
      }
      &-logo {
        min-width: 250px;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        padding: 0 15px;
      }
      &-nav {
        display: flex;
        height: 100%;
        margin-left: 200px;
        align-items: flex-end;
        li {
          display: inline-block;
          margin: 0 3px;
          background: rgba(102, 177, 255, 0.2);
        }
        a{
          padding: 8px 15px;
          display: inline-flex;
          align-items: center;
          color: #e1e1e1;
          min-width: 80px;
          justify-content: center;
          font-size: 18px;
        }
        &-active > a {
          background: #66b1ff;
          color:#fff;
        }
      }
      &-btn {
        height: 100%;
        margin-left: auto;
        display: inline-flex;
        align-items: center;
      }
    }
    &_notify {
      height: 40px;
      width: 100%;
      background: var(--yy-notification-bgColor);
    }
    &_router {
      position: absolute;
      top: 50px;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
}
</style>
